<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="服务种类">
            <el-table :data="tableData" style="width: 100%" v-loading="loading">
                <el-table-column prop="sName" label="商品名称"></el-table-column>
                <el-table-column prop="sDesc" label="商品详情"></el-table-column>
                <el-table-column label="分成比例">
                    <template scope="scope">
                        {{`${scope.row.divideInto ? scope.row.divideInto + '%' : '' }`}}
                    </template>
                </el-table-column>
                <el-table-column prop="sDividedPercentage" label="分成方式"></el-table-column>
            </el-table>
        </TableLayout>
    </div>
</template>
<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { listCategoryServiceData } from 'api/serviceManage';
export default {
    components: { Levelbar, TableLayout },
    data() {
        return {
            loading: false,
            tableData: []
        };
    },
    created() {
        this.loading = true;
        listCategoryServiceData().then(data => {
            this.loading = false;
            this.tableData = data.data.content;
        }).catch(Error => {
            this.$message.error(Error)
        })
    }
};
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .app-levelbar {
    height: 35px;
  }
  .el-form {
    background: #fff;
    padding-bottom: 50px;
  }
}
</style>
